<template>
	<div class="login-container">
		<div class="title-container">
			<h3 class="title">蓝象微猎聘</h3>
		</div>
		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" v-if="isSecretLogin">
			<el-form-item prop="username">
				<span class="svg-container">
					<svg-icon icon-class="user" />
				</span>
				<el-input ref="username" v-model="loginForm.username" placeholder="请输入手机号" name="username" type="text" maxlength="11"
				 tabindex="1" autocomplete="on" />
			</el-form-item>

			<el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual>
				<el-form-item prop="password">
					<span class="svg-container">
						<svg-icon icon-class="password" />
					</span>
					<el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="请输入密码"
					 name="password" tabindex="2" autocomplete="on" @blur="capsTooltip = false"
					 @keyup.enter.native="handleLogin" />
					<span class="show-pwd" @click="showPwd">
						<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
					</span>
				</el-form-item>
			</el-tooltip>
			<div class="radio-wrap">
				<el-radio v-model="loginForm.radioType" label="agent">代理登录</el-radio>
				<el-radio v-model="loginForm.radioType" label="admin">管理员登录</el-radio>
			</div>
			<el-button :loading="loading" type="primary" class="login-btn" @click.native.prevent="handleLogin">登录</el-button>

			<!-- <div style="position:relative">
				<div class="tips" @click="changeLoginType">验证码登录</div>
			</div> -->
		</el-form>
		<!-- 验证码登录 -->
		<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left" v-else>
			<el-form-item prop="username">
				<span class="svg-container">
					<svg-icon icon-class="user" />
				</span>
				<el-input ref="username" v-model="loginForm.username" placeholder="请输入手机号" name="username" type="text" maxlength="11"
				 tabindex="1" autocomplete="on" />
			</el-form-item>
		
			<div style="display: flex;align-items: center;justify-content: space-between;">
				<el-form-item prop="verifyCode">
					<span class="svg-container">
						<svg-icon icon-class="email" />
					</span>
					<el-input  class="verfity-txt" ref="verifyCode" v-model="loginForm.verifyCode" type="text" placeholder="请输入验证码" name="verifyCode" tabindex="3" maxlength="6" autocomplete="on" @blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
				</el-form-item>
				<el-button type="primary" class="verify-btn" @click.native.prevent="codeButton" :disabled="codeTips=='获取短信验证码'?false:true">{{codeTips}}</el-button>
			</div>
			<el-button :loading="loading" type="primary" class="login-btn" @click.native.prevent="handleLogin">登录</el-button>
		
			<div style="position:relative">
				<div class="tips" @click="changeLoginType">密码登录</div>
			</div>
		</el-form>
	</div>
</template>

<script>
	import { validUsername } from '@/utils/validate'

	export default {
		name: 'Login',
		data() {
			const validateUsername = (rule, value, callback) => {
				if (!validUsername(value)) {
					callback(new Error('请输入正确的手机号'))
				} else {
					callback()
				}
			}
			const validatePassword = (rule, value, callback) => {
				if (value.length < 6) {
					callback(new Error('密码长度不能小于6位'))
				} else {
					callback()
				}
			}
			const validateVerifyCode =	(rule, value, callback) => {
				if (value.length < 1) {
					callback(new Error('请输入验证码'))
				} else {
					callback()
				}
			}							
			return {
				loginForm: {
					username: '',
					password: '',
					verifyCode: '', //验证码
					radioType:'agent', //登录类型
				},
				loginRules: {
					username: [{ required: true, trigger: 'blur', validator: validateUsername }],
					password: [{ required: true, trigger: 'blur', validator: validatePassword }],
					verifyCode: [{ required: true, trigger: 'blur', validator: validateVerifyCode }]
				},
				passwordType: 'password',
				capsTooltip: false,
				loading: false,
				showDialog: false,
				redirect: undefined,
				otherQuery: {},
				isSecretLogin: true, //密码登录
				codeTips:'获取短信验证码',
				
			}
		},
		watch: {
			$route: {
			  handler: function(route) {
			    this.redirect = route.query && route.query.redirect
			  },
			  immediate: true
			}
		},
		mounted() {
			if (this.loginForm.username === '') {
				this.$refs.username.focus()
			} else if (this.loginForm.password === '') {
				this.$refs.password.focus()
			}
			// 绑定监听事件
			window.addEventListener('keydown', this.keyDown);
		},
		destroyed() {
			// 销毁事件
		    window.removeEventListener('keydown', this.keyDown, false);
		},
		methods: {
			keyDown(e) {
			   // 回车则执行登录方法 enter键的ASCII是13
				if (e.keyCode === 13) {
					this.handleLogin(); // 定义的登录方法
				}
			},
			showPwd() {
				if (this.passwordType === 'password') {
					this.passwordType = ''
				} else {
					this.passwordType = 'password'
				}
				this.$nextTick(() => {
					this.$refs.password.focus()
				})
			},
			// 切换登录方式
			changeLoginType(){
				this.isSecretLogin = !this.isSecretLogin;
			},
			codeButton(){
				var time = 59;
				let that = this;
				
				this.$refs.loginForm.validateField('username',(usernameError) => {
					if(usernameError){
						return false;
					}else{
						clearInterval(set);
						var set = setInterval(function(){
							that.$set(that, 'codeTips', `${time}秒后重新获取`);
							time--;
							if(time==0){
								that.codeTips = '获取短信验证码';
								clearInterval(set);
							}
						 }, 1000);
					}
				})
			},
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						try{
							this.loading = true;
							this.$store.dispatch('user/login', {
								username: this.loginForm.username.trim(),
								password: this.loginForm.password,
								logintype: this.loginForm.radioType
							}).then(resolve => {
								this.$router.push({
									path: this.redirect || '/',
									query: this.otherQuery
								})
								this.loading = false
							}).catch(() => {
								this.loading = false
							})
						}catch(e){
						  this.loading = false
						  console.log(e)
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
	$bg:#283443;
	$light_gray:#fff;
	$cursor: #fff;

	@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
		.login-container .el-input input {
			color: $cursor;
		}  
	}
	/* reset element-ui css */
	.login-container {
	   .el-input {	
			display: inline-block;
			height: 47px;
			width: 85%;	
			input {
				background: transparent;
				border: 0px;
				-webkit-appearance: none;
				border-radius: 0px;
				padding: 12px 5px 12px 15px;
				color: $light_gray;
				height: 47px;
				caret-color: $cursor;

				&:-webkit-autofill {
					box-shadow: 0 0 0px 1000px $bg inset !important;
					-webkit-text-fill-color: $cursor !important;
				}
			}
		}

		.el-form-item {
			border: 1px solid rgba(255, 255, 255, 0.1);
			background: rgba(0, 0, 0, 0.1);
			border-radius: 5px;
			color: #454545;
		}
		.radio-wrap{
			margin:-8px 0 16px;
			.el-radio{
				color:#fff;
			}
		}
	}
</style>

<style lang="scss" scoped>
	$bg:#2d3a4b;
	$dark_gray:#889aa4;
	$light_gray:#eee;

	.login-container {
		min-height: 100%;
		width: 100%;
		background-color: $bg;
		overflow: hidden;

		.login-form {
			position: relative;
			width: 520px;
			max-width: 100%;
			padding: 0 35px;
			margin: 0 auto;
			overflow: hidden;
		}

		.tips {
			font-size: 14px;
			color: #fff;
			margin-bottom: 10px;
			width:96%;
			text-align: right;
			cursor: pointer;
		}

		.svg-container {
			padding: 6px 5px 6px 15px;
			color: $dark_gray;
			vertical-align: middle;
			width: 30px;
			display: inline-block;
		}

		.title-container {
			position: relative;
			padding-top:160px;

			.title {
				font-size: 26px;
				color: $light_gray;
				margin: 0px auto 40px auto;
				text-align: center;
				font-weight: bold;
			}
		}

		.show-pwd {
			position: absolute;
			right: 10px;
			top: 7px;
			font-size: 16px;
			color: $dark_gray;
			cursor: pointer;
			user-select: none;
		}

		.thirdparty-button {
			position: absolute;
			right: 0;
			bottom: 6px;
		}
		.verfity-txt{
			width:230px;
		}
		.verify-btn{
			margin-bottom: 22px;
			padding-top:13px;
			padding-bottom:13px;
		}
		.login-btn{
			width:100%;
			padding:14px 0;
			margin-top:10px;
			margin-bottom:30px;
			font-size:15px;
		}

		@media only screen and (max-width: 470px) {
			.thirdparty-button {
				display: none;
			}
		}
	}
</style>
